.container {
	width: 1000px;
	margin: 0 auto;
	padding: 50px;
	text-align: center;
	position: relative;
}

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

.box {
	width: 200px;
	height: 200px;
	margin: 50px;
	float: left;
	transition: all 1s;
}

span {}

.red {
	background: red;
}

.blue {
	background: blue;
}

.yellowgreen {
	background: yellowgreen;
}

.rotate-x:hover {
	transform: rotateX(180deg);
}

.rotate-y:hover {
	transform: rotateY(180deg);
}

.rotate-z:hover {
	transform: rotateZ(180deg);
}

.scale-x:hover {
	transform: scaleX(1.5);
}

.scale-y:hover {
	transform: scaleY(0.8);
}

.scale:hover {
	transform: scale(1.5, 0.8);
}

.skew-x:hover {
	transform: skewX(30deg);
}

.skew-y:hover {
	transform: skewY(30deg);
}

.skew:hover {
	transform: skew(30deg, 30deg);
}

.origin {
	transform-origin: right top;

}

.origin:active {
	transform: rotateX(360deg) scale(1.2);
}

.child:hover {
	transform: rotateX(60deg) rotateY(60deg);
}

.flat {
	transform-style: flat;
}

.tran-3d {
	transform-style: preserve-3d;
}

.parent {
	background: greenyellow;
	height: 200px;
	width: 200px;
	float: left;
	margin-left: 50px;

	display: flex;
	justify-content: center;
	align-items: center;

}

.child {
	opacity: 0.6;
	width: 200px;
	height: 200px;
	transition: all 1s;
}

form {
	text-align: center;
}

.stage {
	transform-style: preserve-3d;
	perspective: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.stage .box1 {
	width: 120px;
	height: 50px;
	background-color: red;

	display: flex;
	justify-content: center;
	align-items: center;

}

/* 立方体------- */
.cube {
	width: 200px;
	height: 200px;
	/* background: gainsboro; */
	transform-style: preserve-3d;
	transform: rotateX(30deg) rotateY(30deg);
	position: relative;
	top: 300px;
	left: 300px;

}

.face {
	width: 200px;
	height: 200px;
	position: absolute;
	opacity: 0.6;
	font-size: 2em;
	color: white;
	text-transform: uppercase;
	line-height: 200px;
	/* backface-visibility: hidden; */
	transition: all 1s linear;
}

.front {
	background-color: red;
	transform: translateZ(100px);
}

.back {
	background-color: green;
	transform: rotateY(180deg) translateZ(100px);
}

.left {
	background-color: blue;
	transform: rotateY(90deg) translateZ(100px);
}

.right {
	background-color: orange;
	transform: rotateY(-90deg) translateZ(100px);
}

.top {
	background-color: purple;
	transform: rotateX(90deg) translateZ(100px);
}

.bottom {
	background-color: black;
	transform: rotateX(-90deg) translateZ(100px);
}

.btn {
	border-radius: 50% 50%;
	width: 80px;
	height: 80px;
	background: #000000;
	color: white;
	border: none;
}
.box{
	width: 800px;
	height: 800px;
	background-color: rgb(212, 212, 212);
}